import React, { Component } from 'react';
import { Form, Table, Tag, Badge } from 'antd';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import OrderAnalysisTableDetail from './OrderAnalysisTableDetail';
import RightDraw from '@/components/RightDraw';
import style from './index.less';
import moment from 'moment';
import { transferLanguage, } from '@/utils/utils';

let timer = null;
@connect(({ orderAnalysis, component, loading ,i18n}) => ({
  orderAnalysis,
  OrderStatusCountbyDate: orderAnalysis.OrderStatusCountbyDate,
  OrderStatusList: orderAnalysis.OrderStatusList,
  CustomerOrders: orderAnalysis.CustomerOrders,
  language:i18n.language
}))
@Form.create()
export default class OrderAnalysisTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      detailId: '',
      time: new Date(),
      OrderStatusList: [],
    };
  }
  columns = [
    {
      title: '',
      dataIndex: 'level',
      key: 'level',
      width: 80,
      render: (text, record, index) => {
        return (
          <div style={{ textAlign: 'center' }}>
            <Badge
              status={text == 1 ? 'error' : text == 2 ? 'warning' : 'success'}
              className={style.myBadge}
            />
          </div>
        );
      },
    },
    {
      // title: 'orderNo #',
      //title: '订单号',
      title: 'OrderNo',
      dataIndex: 'orderNo',
      key: 'orderNo',
      render: (text, record) => (
        <a onClick={e => this.showDetail(e, record)} title={text}>
          {text}
        </a>
      ),
    },
    {
      title: 'Customer',
      // title: '客户',
      // title: formatMessage({ id: 'orderAnalysis.status.Customer' }),
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: 'Schedule Ship Out',
      // title: '出库时间',
      // title: formatMessage({ id: 'orderAnalysis.status.ScheduleDelivery' }),
      dataIndex: 'scheduleDelivery',
      key: 'scheduleDelivery',
    },
    {
      title: 'Status',
      //title: '当前状态',
      // title: formatMessage({ id: 'orderAnalysis.status.status' }),
      key: 'status',
      dataIndex: 'status',
    },
  ];
  componentDidMount() {
    this.getOrderStatusList();
    timer = setInterval(() => {
      this.setState({
        time: new Date(),
      });
    }, 1000);
  }
  componentWillUnmount() {
    // console.log('卸载');
    clearInterval(timer);
  }
  getOrderStatusList = () => {
    const nowDate = moment(this.state.time).format('YYYY-MM-DD');
    let oldDate = '2019-04-02';
    let overDate = '2020-06-10';
    const { dispatch } = this.props;
    dispatch({
      type: 'orderAnalysis/selectKangNingOrderStatusList',
      payload: {},
      callback: data => {
        console.log('data2----', data)
        let OrderStatusList = [];
        OrderStatusList = (data || []).map(v => {
          v.scheduleDelivery = moment(v.scheduleDelivery).format('MM-DD HH:mm')

        })

        this.setState({
          OrderStatusList: data
        })
      },
    });
  }
  showDetail = (e, record) => {
    e.stopPropagation();
    console.log('e--record', e, record)
    this.handleStateChange([{ detailId: record['orderNo'] }, { visible: true }]);
  };
  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  render() {
    const { visible, detailId, time, OrderStatusList } = this.state;
    const rightDrawParams = {
      visible,
      //title: 'Order status details' 订单状态 ,
      title: transferLanguage('orderAnalysis.status.Order Status Details',this.props.language),
      width: '60%',
      closeDetail: () => {
        this.handleStateChange([{ visible: false }]);
      },
    };
    const tipStyles = { display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'center', fontWeight: 'bold', marginRight: 20, marginTop: 5, lineHeight: 1 }

    // const data = OrderStatusList || [
    //   {
    //     key: '1',
    //     orderNo: '27387',
    //     customerName: '梅里亚',
    //     scheduleDelivery: '13:00',
    //     status: 'Ready to ship',
    //   },
    //   {
    //     key: '2',
    //     orderNo: '27389',
    //     customerName: '广州华粤',
    //     scheduleDelivery: '15:00',
    //     status: 'Order packed',
    //   },
    //   {
    //     key: '3',
    //     orderNo: '27388',
    //     customerName: '上海百赛',
    //     scheduleDelivery: '15:00',
    //     status: 'Ready to ship',
    //   },
    //   {
    //     key: '4',
    //     orderNo: '27391',
    //     customerName: '北京赛泰克',
    //     scheduleDelivery: '15:00',
    //     status: 'Ready to ship',
    //   },
    //   {
    //     key: '5',
    //     orderNo: '27392',
    //     customerName: '济南汇世',
    //     scheduleDelivery: '15:00',
    //     status: 'Ready to ship',
    //   },
    // ];


    const m = (time.getMonth() + 1 + '').padStart(2, '0');
    const d = (time.getDate() + '').padStart(2, '0');

    const hh = (time.getHours() + '').padStart(2, '0');
    const mm = (time.getMinutes() + '').padStart(2, '0');
    const ss = (time.getSeconds() + '').padStart(2, '0');
    
    return (
      <div>
        <div style={{paddingTop:5}} >
          <h4 className={style.tableTitle} style={{ position: "relative" }}>Order Status</h4>
          <p className={style.textLabel} style={{ position: "absolute", right: "10px", top: "0px" }}>
            {`${d} / ${m} ， ${hh}:${mm}:${ss}`}
            {/* {moment(time).format('MM-DD HH:mm:ss')} */}
          </p>

        </div>

        {/* Order status  */}
        <Table pagination={false} columns={this.columns} dataSource={OrderStatusList} scroll={{ x: 640, y: 220 }} />
        <div style={{...tipStyles,position:'absolute',width:'100%',bottom:26,}} >
          <div style={tipStyles}><div style={{ width: 12, height: 12, backgroundColor: '#52C41A', borderRadius: 6, marginRight: 4 }} ></div> In progress  </div>
          <div style={tipStyles}><div style={{ width: 12, height: 12, backgroundColor: '#FAAD14', borderRadius: 6, marginRight: 4 }} ></div> Alert  </div>
          <div style={tipStyles}><div style={{ width: 12, height: 12, backgroundColor: '#F5222D', borderRadius: 6, marginRight: 4 }} ></div> Delay   </div>
        </div>
        <RightDraw {...rightDrawParams}>
          <OrderAnalysisTableDetail detailId={detailId} closeDetail={this.handleStateChange} />
        </RightDraw>
      </div>
    );
  }
}
